<!DOCTYPE HTML> 
<html>
    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" type="text/css" href="css/default.css" />
        <script src="./js/dracula/jquery-1.4.2.min.js"></script>
        <script src="./js/kineticJS/kinetic-v4.0.3.min.js"></script>
        <script src="./js/dracula/raphael-min.js"></script>
        <script src="./js/dracula/dracula_graffle.js"></script>
        <script src="./js/dracula/dracula_graph.js"></script>
        <!-- 
            TODO: remove me please! 
            <script src="./js/boardGraph.js"></script>
        -->
        <script src="./js/unit.js"></script>
        <script src="./js/scenarios.js"></script>
        <script src="./js/terrains.js"></script>
        <script src="./js/terrainDatabase.js"></script>
        <script src="./js/boardSetup.js"></script>
        <script src="./js/imageLoader.js"></script>
        <script src="./js/player.js"></script>
        
        <script src="./js/game.js"></script>
        <script src="./js/utils.js"></script>
        <script>
            window.onload = function()
            {
                var scenario = Hasl.Scenarios.Vierville;
                mGameInterface.startScenario(scenario, false);
            }
            
            function done()
            {
                alert('not implemented');
            }
        </script>
    </head>
    <body>
        <article>
            <header>
                <div id="gameInfo">
                    <p id="player" class="nonBreaking">|player|</p>
                    <p id="phase" class="nonBreaking someMargin">|phase|</p>
                    <p id="turn" class="nonBreaking someMargin">|turn|</p>
                    <!--<p id="debug" class="nonBreaking someMargin"></p>-->
                </div>
            </header>
            <div id="main" class="clearfix">
                <div id="board"></div>
                <aside id="side">
                    <div id="info">
                        <img id="selectedUnit" src=""/>
                        <p id="terrainInfo"></p>
                    </div>
                </aside>
            </div>
            <footer class="clearfix">
                <div id="controls">
                    <button id="done" onclick="done();">done</button>
                </div>
                <div id="reinforcements"><h1>Reinforcements</h1></div>
            </footer>
        </article>
    </body>
</html>